<template>
	<view>
		<div>
			<navitop> 
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outs"></i>
				<span slot="center-slot">分享列表</span>
				<!-- <i  slot="right-slot" ></i> -->
			</navitop>
		</div>
		
		<div class="detial" :style='window_height'>
			<div style="background-color: #f0f0f0;" class="public_margin_top"></div>
			<scroll-view class="staff_b" scroll-y="true" touch-action=none; >
				<div class="profit_icon" v-for="(item,index) in dataSorce">
					<div class="profit_text">{{item.shareTitle}}</div>
					<div @click="char_user(item.id)" class="profit_ic"><i class="iconfont icon-fenxiang1"></i></div>
				</div>
			</scroll-view>
		</div>
		
		<!-- 分享弹窗 -->
		<popus ref="partner_share">
			<div class="share_out">
				<div class="share_out_class">
					<div v-for="(item,index) in list_tal" @click="share_click(item)">
						<div v-if='item.inddex !== 2'>
							<div class="share_out_icon" >
								<i :class="['iconfont',item.icon]"></i>
							</div>
							<div class="share_out_txt">
								<text>{{item.name}}</text>
							</div>
						</div>
						<div v-else>
							<div class="share_out_icon" >
								<i :class="['iconfont',item.icon]"></i>
							</div>
							<div class="share_out_txt_ind">
								<text>{{item.name}}</text>
							</div>
						</div>
					</div>
				</div>
			</div>
		</popus>
	</view>
</template>

<script>
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import navitop from '@/components/common/navi-top'
	import {getShareInfo,sharegetList,countShare} from '@/common/api/my/myapi.js'
	export default {
		components:{
			navitop,
			popus,
		},
		props:{
			data: {
				default: ''
			}
		},
		data(){
			return {
				window_height:'',
				alertWidth: '',
				current: 0,
				scroll_one: false, //设置tabs选项是否平铺 
				dataSorce: '',
				shar_data: {},
				shar_user: '',
				list_tal: [
					{
						name: '分享给朋友',
						code: 'WXSceneSession',
						icon: 'icon-fenxiang2',
						inddex: 1
					},
					{
						name: '分享到朋友圈',
						code: 'WXSenceTimeline',
						icon: 'icon-pengyouquan',
						inddex: 2
					},
					{
						name: '收藏',
						code: 'WXSceneFavorite',
						icon: 'icon-shoucang',
						inddex: 3
					},
					{
						name: '链接',
						code: '',
						icon: 'icon-lianjie',
						inddex: 4
					}
					
				],
			}
		},
		mounted() {
			let _this = this;
			uni.getSystemInfo({
			    success: function (res) {
					_this.alertWidth = 'width:' + res.windowWidth + 'px;'
			    }
			});
		   const res = uni.getSystemInfoSync();
		   this.window_height = 'height:' + res.windowHeight + 'px;';
		   
		   this.shar_list();
		   
		   // 获取分享用户
		   getShareInfo().then((rows)=>{
				if(rows.code == 200){
					this.shar_user = rows.data;
				}
		   })
		},
		methods:{
			
			// 返回
			outs(){
				uni.navigateBack({
					url: '/pages/my/my'
				})
			},
			shar_list(){
				uni.showLoading({
					title: '加载中...'
				})
				sharegetList().then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						this.dataSorce = rows.data;
					}
				})
			},
			char_user(val){
				let data = {};
					this.dataSorce.filter(function (item){
					if(item.id == val){
						data = item;
					}
				})
				this.shar_data = data;
				this.$refs.partner_share.open('bottom') 
			},
			
			// 分享
			share_click(val){
				let _this = this;
				uni.showLoading({
					title: '正在加载...'
				})
				if(val.inddex !== 4){
					this.$refs.partner_share.close();
					this.share_nomber();
					uni.hideLoading();
					uni.share({
						provider: "weixin",
						scene: val.code,
						type: 0,
						href: this.shar_user.registerUrl + '&shareId=' + this.shar_data.id,
						title: this.shar_data.shareTitle, 
						summary: this.shar_data.shareRemark,
						imageUrl: this.shar_data.shareImg,
						success: function (res) {
							console.log("success:" + JSON.stringify(res)); 
						},
						fail: function (err) { 
							console.log("fail:" + JSON.stringify(err));
						}
					}); 
				}else{
					uni.setClipboardData({
						data: this.shar_user.registerUrl, 
						complete() {
							uni.showToast({
								title: "已复制到剪贴板"
							})
						}
					})
				}
			},
			
			// 分享次数累计
			share_nomber(){
				countShare(this.shar_data.id).then((rows) => {
					if (rows.code == 200){
						 console.log('++++++++++',rows) 
					}
				})
			},
			
		}
	}
	
</script>

<style scoped lang="scss">
.detial {
	background-color: #fff;
}
.profit_icon {
	padding: 20rpx 0 0 0;
	display: flex;
	justify-content: space-between;
	width: 80%;
	margin: auto;
	height: 120rpx;
	line-height: 120rpx;
	border-bottom: 1px solid #cacaca;
	.profit_text {
		width: 80%;
		overflow: hidden;
	}
	i {
		font-size: 35px;
		color: rgb(18, 150, 219);
	}
}
.share_out {
	height: 550rpx;
	width: 100%;
	background-color: #fff;
	border-radius: 20px 20px 0 0;
}
.share_out_class {
	padding: 30rpx 0 0 0 ;
	width: 95%;
	display: flex;
	justify-content: space-around;
	margin: auto;
	.share_out_icon {
		font-size: 50px;
		color: #217fd0;
		text-align: center;
	}
	.share_out_txt {
		font-size: 15px;
		color: #868282;
		width: 80px;
		text-align: center;
	}
	.share_out_txt_ind {
		font-size: 15px;
		color: #868282;
		width: 50px;
		text-align: center;
	}
}
</style>
